<template>
  <div ref="chartRef" class="chart" :style="{ '--chart-height': chartHeight }"></div>
</template>

<script>
import * as echarts from 'echarts'
import mix from './mixin'
export default {
  mixins: [mix],
  name: 'myline',
  props: {
    xAxis: {
      type: Array,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    height: {
      type: [Number, String],
      default: 'inherit'
    },
    grid: {
      type: Object,
      default: () => ({
        left: 30,
        top: 10,
        right: 20,
        bottom: 30
      })
    },
    tooltip: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    chartHeight() {
      return typeof this.height === 'number' ? this.height + 'px' : this.height
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chartRef, '', { renderer: 'canvas' })
    this.myChart.setOption({
      tooltip: {
        show: this.tooltip
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.xAxis
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        show: false,
        ...this.grid
      },
      series: this.series
      // [
      //   {
      //     type: 'line',
      //     // lineStyle: {
      //     //   width: 3
      //     // },
      //     showSymbol: true,
      //     data: [820, 932, 901, 934, 1290, 1330, 1320],
      //     smooth: true
      //     // areaStyle: {
      //     //   color: '#f00'
      //     // },
      //     // emphasis: {
      //     //   focus: 'series'
      //     // }
      //   },
      //   {
      //     type: 'line',
      //     // lineStyle: {
      //     //   width: 3
      //     // },
      //     showSymbol: true,
      //     data: [12, 32, 301, 1034, 652, 980, 325],
      //     smooth: true
      //     // areaStyle: {},
      //     // emphasis: {
      //     //   focus: 'series'
      //     // }
      //   }
      // ]
    })
  },
  beforeDestroy() {
    // 销毁实例
    this.myChart && this.myChart.dispose()
    this.myChart = null
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: var(--chart-height);
}
</style>
